<!DOCTYPE html>
<html lang="en">

	<head>
		<meta charset="UTF-8">
		<meta http-equiv="X-UA-Compatible" content="IE=edge">
		<meta name="viewport" content="width=device-width, initial-scale=1.0">
		<title>X6 效果测试</title>
		<script src="jquery-3.6.min.js"></script>
		<script src="watch.js" data-title="监听属性js"></script>
		<script src="x6.min.js"></script>
		<script src="x6.layout.min.js"></script>
		<script src="mock.js"></script>
		<link rel="stylesheet" href="./mod/style/main.css">
		<link rel="stylesheet" href="./mod/style/actionMod.css">
		<script src="./tippy/popperjs.js"></script>
		<script src="./tippy/tippy.min.js"></script>
		<link rel="stylesheet" href="./tippy/tippy.css">
		<link rel="stylesheet" href="./mod/style/actionMod.css">
		<link rel="stylesheet" href="./mod/style/reactLMod.css">
		<script src="./mod/x6Main/hierarchy.min.js"></script>
		<script type="module">
			import x6MainFn from "./mod/x6Main/index.js";
			// import hierarchy from "./mod/x6Main/hierarchy.min.js";
			import nodeInfoModFn from "./tippy/nodeInfoMod.js";
			import {
				nodeConfig,
				X6Config
			} from "./mod/x6Main/X6ConfigFile.js";
			import {
				addBtnChildrenTool,
				addBtnParentTool,
				decreaseBtnChildrenTool,
				decreaseBtnParentTool
			} from "./mod/x6Main/tools.js";
			import actionMod from "./mod/html/actionMod.js";
			import reactLMod from "./mod/html/reactLMod.js";
			window.x6MainFn = x6MainFn;
			window.nodeInfoModFn = nodeInfoModFn;
			window.nodeConfig = nodeConfig;
			window.X6Config = X6Config;
			window.addBtnChildrenTool = addBtnChildrenTool;
			window.addBtnParentTool = addBtnParentTool;
			window.decreaseBtnChildrenTool = decreaseBtnChildrenTool;
			window.decreaseBtnParentTool = decreaseBtnParentTool;
			window.actionMod = actionMod;
			window.reactLMod = reactLMod;
			// window.hierarchy = hierarchy;
			// console.log("hierarchy", hierarchy)
		</script>
	</head>
	<style>
		html,
		body {
			height: 100%;
			width: 100%;
			margin: 0;
			padding: 0;
		}

		.all {
			height: 100%;
			width: 100%;
			overflow: auto;
			position: relative;
		}
		.flex-c{
			display: flex;
			justify-content:center;
			align-content: center;
		}
		.flex{
			display: flex;
			align-content: center;
		}
		.flex span:nth-child(1){
			white-space:nowrap;
		}
		#minimapContainer {
			position: absolute;
			bottom: 20px;
			right: 20px;
			box-shadow: 0 10px 10px -10px rgba(0, 0, 0, 0.5);
		}

		#test {
			/**
            width: 100%;
            height: 100%;
            */
		}

		.topic-image {
			visibility: hidden;
			cursor: pointer;
		}

		.x6-node:hover .topic-image {
			visibility: visible;
		}

		.x6-node-selected rect {
			stroke-width: 2px;
		}

		.x6-widget-minimap {
			/* 小地图 */
			/* background-color: transparent; */
		}

		/* .x6-widget-minimap:hover{
			 background-color: #fff; 
		} */
		.tippy-box {
			background-color: #fff;
			color: #333;
		}

		.tippy-arrow {
			color: #fff;
		}

		.reactLBody {
			border: 2px dashed transparent;
		}

		.selectNodeBody {
			border: 2px dashed #feb663;
		}

		#maximize {
			position: absolute;
			top: 10px;
			right: 20px;
			z-index: 100;
			cursor: pointer;
			-moz-user-select: none;
			/*火狐*/
			-webkit-user-select: none;
			/*webkit浏览器 */
			-ms-user-select: none;
			/*IE10*/
			-khtml-user-select: none;
			/*早期浏览器 */
			user-select: none;
			display: flex;
			align-items: center;
			justify-content: center;
		}
		.iconBtn,.maximizeBtn{
			margin-right: 6px;
		}

		/* Switch开关样式 start */
		.switch-component {
			position: relative;
			width: 40px;
			height: 16px;
			background-color: #DCDFE6;
			border-radius: 16px;
			border: none;
			outline: none;
			-webkit-appearance: none;
			transition: all .4s ease;
			cursor: pointer;
		}


		/* 按钮 */
		.switch-component::after {
			content: '';
			position: absolute;
			top: 1px;
			left: 0;
			width: 14px;
			height: 14px;
			background-color: #fff;
			border-radius: 50%;
			transition: all .2s ease;
		}


		/* 选中状态时，背景色切换 */
		.switch-component:checked {
			background-color: #409EFF;
		}


		/* 选中状态时，按钮的位置移动 */
		.switch-component:checked::after {
			left: 25px;
		}

		/* Switch开关样式 end */
		
		/* 缩略图动画 start */
		#minimapContainer{
			border: 1px solid transparent;
		}
		#minimapContainer:hover{
			border: 1px solid #e1e1e1;
		}
		#minimapContainer:hover .minimapContainerTitleDiv {
			display: flex;
			animation: show_frames .6s;
			opacity: 1;
		}

		.minimapContainerTitleDiv {
			opacity: 0;
			display: none;
			/* display: flex; */
			justify-content: space-between;
			align-content: center;
			background-color: #DBEFFF;
			border-bottom: 1px solid #eee;
			/* border-top: 1px solid #eee; */
			transition:opacity .6s;
			color: #666;
		}
		#legendDiv{
			/* background-color: #DBEFFF; */
			border-bottom: 1px solid #eee;
			border: 1px solid transparent;
			/* box-shadow: 0 10px 10px -10px rgba(0, 0, 0, 0.5); */
			min-width: 160px;
			max-width: 300px;
			position: absolute;
    top: 20px;
    left: 20px;
		-webkit-user-select:none;
   -moz-user-select:none;
   -ms-user-select:none;
   user-select:none;

		}
		#legendDiv:hover {
			background-color: #fff;
			border: 1px solid #eee;
			box-shadow: 0 10px 10px -10px rgba(0, 0, 0, 0.5);
			animation: changBgFFF .5s linear;

		}
		#legendDiv:hover #legendTitle{
			opacity: 1;
			background-color: #DBEFFF;
			 animation: changBgDBEFFF .5s linear;
		}
		#legendTitle{
			opacity: 0;
			padding: 0 16px;
		display: flex;
		/* background-color: #DBEFFF; */
    border-bottom: 1px solid #eee;
		height: 20px;
    color: #666;
		font-size: 14px;
		}
		.legendTextDiv{
			overflow:hidden;
			white-space: nowrap;
			text-overflow: ellipsis;
			-o-text-overflow:ellipsis;
			font-size: 14px;
			height: 20px;
			display: flex;
    align-items: center;
		}
		.legendColorSpan{
			display: flex;
			margin-right: 4px;
		}
		.legendColor{
			line-height: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
			width: 14px;
			height: 14px;
			border-radius: 50%;
			background-color: #feb663;
			display: inline-block;
			line-height: 20px;
			/* 
			margin: auto 0; */
		}
		.legendText{
			text-align: left;
			line-height: 20px;
			overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
		}
		.closeBtn {
			font-size: 12px;
			height: 20px;
			width: 20px;
			cursor: pointer;
			text-align: center;
			display: flex;
			align-items: center;
			justify-content: center;
		}

		.closeBtn:hover {
			background-color: red;
			color: #fff;
		}
		.posirelative {
    position: relative;
}

		@keyframes show_frames {
		  0%
		  {
		    opacity: 0;
		  }
		  100% {
		    opacity: 1;
		  }
		}
		 @keyframes changBgFFF {     
			0% {         background-color: transparent;
			border: 1px solid transparent;      
		box-shadow: 0 10px 10px -10px rgba(0, 0, 0, 0);}     
			100% {         background-color: #fff;
			border: 1px solid #eee;     
		box-shadow: 0 10px 10px -10px rgba(0, 0, 0, 0.5);} 
		}
		@keyframes changBgDBEFFF {     
			0% {         background-color: transparent; 
			opacity: 0;     }     
			100% {        background-color: #DBEFFF;   
			opacity: 1;  } 
		}
		/* 缩略图动画 end */

	</style>

	<body>
		<div class="all">
			<div id="test">testtesttesttest</div>
			<div id="legendDiv" data-title="图例"  oncontextmenu="return false">
				<div id="legendTitle">工作空间图例</div>
			</div> 
			<div id="minimapContainer" data-title="缩略图" oncontextmenu="return false">
				<div class="minimapContainerTitleDiv">
					<div></div>
					<div class="closeBtn" onclick="closeMindMap()">X</div>
				</div>
			</div>
		</div>
		<div id="maximize" data-title="悬浮按钮" oncontextmenu="return false">
			<!-- <div>
				<label><input name="objName" type="checkbox" value="" />端对象</label>
				<label><input name="workSpanName" type="checkbox" value="" />工作空间</label>
				
			</div> -->
			<select class="maximizeBtn" onchange="selectWorkspace()" id="workspaceMode">
				<option value="1">端视角</option>
				<option value="2">工作空间视角</option>
			</select>
			<!-- <button onclick="multipleModFn()">多选模式</button> -->
			<!-- <button onclick="selectedModFn()">选中模式</button> -->
			<svg t="1672018649057" data-title="居中" class="icon iconBtn" viewBox="0 0 1024 1024" version="1.1"
				xmlns="http://www.w3.org/2000/svg" p-id="14839" width="26" height="26" data-template="tippyCenter"
				onclick="nodeCenter()">
				<path
					d="M512 341.333333c-94.293333 0-170.666667 76.373333-170.666667 170.666667s76.373333 170.666667 170.666667 170.666667 170.666667-76.373333 170.666667-170.666667-76.373333-170.666667-170.666667-170.666667zM213.333333 640H128v170.666667c0 47.146667 38.186667 85.333333 85.333333 85.333333h170.666667v-85.333333h-170.666667v-170.666667z m0-426.666667h170.666667V128h-170.666667c-47.146667 0-85.333333 38.186667-85.333333 85.333333v170.666667h85.333333v-170.666667z m597.333334-85.333333h-170.666667v85.333333h170.666667v170.666667h85.333333v-170.666667c0-47.146667-38.186667-85.333333-85.333333-85.333333z m0 682.666667h-170.666667v85.333333h170.666667c47.146667 0 85.333333-38.186667 85.333333-85.333333v-170.666667h-85.333333v170.666667z"
					fill="#707070" p-id="14840" class="maximizeSvg"></path>
			</svg>
			<svg t="1642669832521" data-title="放大dag图" class="icon iconBtn" viewBox="0 0 1024 1024" version="1.1"
				onclick="zoomIn()" xmlns="http://www.w3.org/2000/svg" p-id="3938" width="24" height="24"
				data-template="tippyMax">
				<path
					d="M465.454545 232.727273H372.363636v139.636363H232.727273v93.090909h139.636363v139.636364h93.090909v-139.636364h139.636364V372.363636h-139.636364V232.727273z m280.576 447.488A416.721455 416.721455 0 0 0 837.818182 418.909091c0-231.377455-187.531636-418.909091-418.909091-418.909091S0 187.531636 0 418.909091s187.531636 418.909091 418.909091 418.909091c98.909091 0 189.626182-34.443636 261.306182-91.787637l209.780363 209.780364 65.815273-65.815273-209.780364-209.780363zM418.909091 744.727273A325.818182 325.818182 0 1 1 418.909091 93.090909a325.818182 325.818182 0 0 1 0 651.636364z"
					p-id="3939" fill="#707070" class="maximizeSvg"></path>
			</svg>
			<svg t="1642669781915" data-title="缩小dag图" class="icon iconBtn" viewBox="0 0 1024 1024" version="1.1"
				onclick="zoomOut()" xmlns="http://www.w3.org/2000/svg" p-id="3747" width="24" height="24"
				data-template="tippyMin">
				<path
					d="M817.250819 758.215921L996.18664 937.957592a41.469174 41.469174 0 0 1 0.572308 58.733346c-15.942477 15.91168-42.512415 16.209382-58.454892 0L758.19539 817.521574A468.015113 468.015113 0 0 1 641.85663 887.178802a452.107283 452.107283 0 0 1-346.644926 0c-55.212246-22.720339-105.083813-56.663545-147.32419-97.989a469.692255 469.692255 0 0 1-98.325198-146.970026l-0.872576-2.969325a447.174662 447.174662 0 0 1-33.383731-170.615553c0-246.130588 202.564666-453.354553 453.527785-453.354553A449.041718 449.041718 0 0 1 641.85663 50.144889a464.599234 464.599234 0 0 1 147.651406 98.293118l1.47183 2.044138a453.282694 453.282694 0 0 1 96.526152 144.925889l0.627485 2.343123a449.208534 449.208534 0 0 1 33.628822 170.888874 458.137039 458.137039 0 0 1-34.26144 173.584877 466.46629 466.46629 0 0 1-70.255199 116.001279z m-178.364797-314.371163H298.754619c-14.144713 0-25.099392 10.65056-25.099391 24.79014a24.932576 24.932576 0 0 0 25.099391 25.116073h340.131403a25.032665 25.032665 0 0 0 24.827353-25.116073 24.579696 24.579696 0 0 0-24.827353-24.79014zM609.971677 126.558164a377.060615 377.060615 0 0 0-141.137883-27.732518c-204.907789 0-370.272487 168.245482-370.272487 369.809252a371.069354 371.069354 0 0 0 26.866358 139.641672l0.89824 2.042854a381.15274 381.15274 0 0 0 80.910892 120.137032 367.380154 367.380154 0 0 0 119.881675 80.584959 377.051633 377.051633 0 0 0 141.710189 27.759465 371.795645 371.795645 0 0 0 141.137883-27.759465c90.368075-37.785107 163.593882-110.084443 200.765619-200.718141a374.586605 374.586605 0 0 0 27.769731-141.688376 359.131745 359.131745 0 0 0-27.143529-138.689537l-0.626202-2.969325c-18.886137-43.967564-45.456076-84.394779-78.540821-117.466692l-1.743869-2.37007a387.598253 387.598253 0 0 0-120.480929-80.584959z"
					p-id="3748" fill="#707070" class="maximizeSvg"></path>
			</svg>

			<svg t="1671774644444" data-title="缩略图" class="icon iconBtn" viewBox="0 0 1024 1024" version="1.1"
				xmlns="http://www.w3.org/2000/svg" p-id="26414" width="24" height="24"
				data-template="tippyWin">
				<path
					d="M573.866667 312.8A122.666667 122.666667 0 0 0 453.333333 394.666667a5.333333 5.333333 0 0 1-5.013333 3.573333H112a5.333333 5.333333 0 0 0-5.333333 5.333333v64a5.333333 5.333333 0 0 0 5.333333 5.333334h336a5.333333 5.333333 0 0 1 5.013333 3.626666 122.666667 122.666667 0 1 0 120.853334-163.733333z m-5.066667 170.666667a48 48 0 1 1 48-48 48 48 0 0 1-48 47.893333z"
					p-id="26415" fill="#707070"></path>
				<path
					d="M799.68 672a122.666667 122.666667 0 0 0-120.64 81.6 5.333333 5.333333 0 0 1-5.013333 3.626667H353.12a10.666667 10.666667 0 0 1-10.666667-10.666667v-34.933333a5.333333 5.333333 0 0 1 5.333334-5.333334h52.64a5.333333 5.333333 0 0 1 4.48 2.56 74.666667 74.666667 0 1 0 0-80 5.333333 5.333333 0 0 1-4.48 2.56h-52.586667a5.333333 5.333333 0 0 1-5.333333-5.333333v-58.133333a53.333333 53.333333 0 0 0-53.333334-53.333334H112a5.333333 5.333333 0 0 0-5.333333 5.333334v64a5.333333 5.333333 0 0 0 5.333333 5.333333h145.12a10.666667 10.666667 0 0 1 10.666667 10.666667v26.08a5.333333 5.333333 0 0 1-5.333334 5.333333H112a5.333333 5.333333 0 0 0-5.333333 5.333333v64a5.333333 5.333333 0 0 0 5.333333 5.333334h150.453333a5.333333 5.333333 0 0 1 5.333334 5.333333V805.333333a26.666667 26.666667 0 0 0 26.666666 26.666667h379.52a5.333333 5.333333 0 0 1 5.013334 3.626667A122.666667 122.666667 0 1 0 799.68 672z m-5.013333 170.666667a48 48 0 1 1 48-48 48 48 0 0 1-48 48zM342.453333 302.613333V229.333333a10.666667 10.666667 0 0 1 10.666667-10.666666h255.466667a5.333333 5.333333 0 0 1 4.48 2.506666 74.666667 74.666667 0 1 0 0-79.733333 5.333333 5.333333 0 0 1-4.533334 2.56H294.506667a26.666667 26.666667 0 0 0-26.666667 26.666667v99.946666a10.666667 10.666667 0 0 1-10.666667 10.666667H112a5.333333 5.333333 0 0 0-5.333333 5.333333v64a5.333333 5.333333 0 0 0 5.333333 5.333334h177.173333a53.333333 53.333333 0 0 0 53.28-53.333334z"
					p-id="26416" class="maximizeSvg" fill="#707070"></path>
			</svg>
		</div>

		<div data-title="tippy信息内容" style="display: none;">
			<div id="tippyMax">
				<span style="color:#333;">放大</span>
			</div>
			<div id="tippyMin">
				<span style="color:#333;">缩小</span>
			</div>
			<div id="tippyWin">
				<span style="color:#333;display: flex;align-items: center;">
					<span style="margin-right: 10px;">缩略图</span>
					<input class="switch-component" type="checkbox">
				</span>
			</div>
			<div id="tippyCenter">
				<span style="color:#333;">
					返回查询对象
				</span>
			</div>

		</div>
	</body>

	<script type="text/javascript">
		var graph = ""; //初始化图形对象行数
		var mainFn = ""; //初始化核心函数对象
		var tippyList = [];
		var rootObj = {};
		var rootId = "";
		var nodeData = {
			nodes: [],
			edges: []
		};
		var hoverNode = null; //移入的节点
		window.selectNode = {}; //选中节点
		var selectEdge = {}; //选中边
		var downNodeList = [];
		var upNodeList = [];
		const typeList = {
			"0": "tab",
			"1": "api",
			"2": "str",
			"3": "report",
			"4": "reportForm",
			"5": "alarmScreen",
			"6": "dataSet"
		};
		var nodeTypeClass = {
			"tab": "表",
			"api": "API",
			"str": "字段",
			"report": "报告",
			"reportForm": "报表",
			"alarmScreen": "报屏",
			"dataSet": "数据集"
		};
		var workspaceMode = "1";
		var selectedMod = true;
		var multipleMod = false;
		var projectNamePublicList = [];
		var nodeDownFlag = false; //根节点是否有下游
		var nodeUpFlag = false; //根节点是否有上游
		var mindMapFlag = true; //  缩略图开关
		var mindConfigObj = {
			mindMapFlag: true,
			workspaceMode:"1"
		}; // 节点图配置
		$(function() {
			var timer;
			/**
			 * 防抖函数
			 * 防抖（Debounce） 函数防抖，
			 * 就是指触发事件后，在 n 秒内函数只能执行一次，如果触发事件后在 n 秒内又触发了事件，则会重新计算函数延执行时间。
			 * @param {any} fn 执行函数
			 * @param {number} wait 等待事件，毫秒为单位
			 */
			$.debounce = function(fn, wait) {
				if (timer !== null) {
					clearTimeout(timer);
				}
				timer = setTimeout(fn, wait);
			}

			$(document).ready(function() {
				
				if(localStorage.mindConfig){
					let mindConfig = JSON.parse(localStorage.mindConfig);
					let workspaceModeVal = mindConfig.workspaceMode;
					$("#workspaceMode").val(workspaceModeVal);
				}else{
					localStorage.setItem("mindConfig",JSON.stringify(mindConfigObj))
				}
				
				selectWorkspace()
				setTimeout(function() {
					initEdeg();
					init()
				}, 300)
			});
		})
		
		function closeMindMap(){
			try{
				mindMapFlag = false;
				mindConfigObj.mindMapFlag = mindMapFlag;
				localStorage.setItem("mindConfig", JSON.stringify(mindConfigObj))
				$("#minimapContainer").hide(500)
			}catch(e){
				//TODO handle the exception
			}
		}
		/**
		 * 观察者模式下监听对象
		 */
		function watchAction() {
			//观察者模式  监听数据
			watch(window, "selectNode", function() {
				if (selectNode) {
					if (selectedMod) {
						oneSelectNode()
					}
					if (multipleMod) {
						multipleSelectNode()
					}

				} else {
					console.log("No  --------   selectNode", selectNode)

				}
			});
		}

		//  初始化  x6布局 连线
		function initEdeg() {
			X6.Graph.registerEdge("custom-edge-label", {
				inherit: "edge",
				defaultLabel: {
					markup: [{
						tagName: "rect",
						selector: "body",
					}, {
						tagName: "text",
						selector: "label",
					}, ],
					attrs: {
						label: {
							fill: "#000",
							fontSize: 14,
							textAnchor: "middle",
							textVerticalAnchor: "middle",
							pointerEvents: "none",
						},
						body: {
							ref: "label",
							fill: "#ffd591",
							stroke: "#ffa940",
							strokeWidth: 2,
							rx: 4,
							ry: 4,
							refWidth: "140%",
							refHeight: "140%",
							refX: "-20%",
							refY: "-20%",
						},
					},
					position: {
						distance: 0.5,
						options: {
							absoluteDistance: true,
							reverseDistance: true,
						},
					},
					zIndex: 0,
				},
			}, true);
		}

		// 初始化  x6  布局
		function init() {
			// 连接器
			X6.Graph.registerConnector(
				'mindmap',
				(sourcePoint, targetPoint, routerPoints, options) => {
					const midX = sourcePoint.x + 6
					const midY = sourcePoint.y
					const ctrX = (targetPoint.x - midX) / 3 + midX + 10
					const ctrY = targetPoint.y
					const pathData = `
		     M ${sourcePoint.x} ${sourcePoint.y}
		     L ${midX} ${midY}
		     Q ${ctrX} ${ctrY} ${targetPoint.x} ${targetPoint.y}
		    `
					return options.raw ? X6.Path.parse(pathData) : pathData
				},
				true,
			)

			//初始化  函数内容
			let w = $(".all").width();
			let h = $(".all").height();
			console.log("w:", w, "  h:", h)

			graph = new X6.Graph({
				container: document.getElementById('test'),
				width: w,
				height: h,
				scroller: {
					enabled: true, //滚动
					className: "my-scroller",
				},
				panning: {
					// enabled: true, //画布可以平移
					//还可以配置 eventTypes 来设置触发画布拖拽的行为，支持 leftMouseDown、 rightMouseDown、mouseWheel，默认为 ['leftMouseDown'] 。
					eventTypes: ["leftMouseDown", "rightMouseDown", "mouseWheel"],
				},

				// async: true,
				// frozen: true,
				scroller: true, //滚动条
				// interacting: false,
				background: {
					color: "#F4F4F4", // 设置画布背景颜色

				},
				selecting: {
					enabled: false, //启用/关闭  选中
					rubberband: false, //是否启用框选
					showNodeSelectionBox: true,
					multiple: false, //多选
					movable: false, //选中是否可以移动
				},
				grid: {
					size: 10, // 网格大小 10px
					visible: false, // 渲染网格背景
					// color:"#fff"
				},
				interacting: {
					'nodeMovable': false, // 节点是否可以被移动。
				},
				connecting: {
					connector: "mindmap", //'smooth',//连线样式  smooth  曲线
				},
				resizing: {
					enabled: false,
					orthogonal: false,
					allowReverse: false,
				},
				scaling: {
					max: 2,
					min: 0.5
				},
				minimap: { //缩略图  
					enabled: true, //是否开启
					container: document.getElementById('minimapContainer'),
					scalable: false,
					graphOptions: {
						async: true,
						getCellView(cell) {
							// 用指定的 View 替换节点默认的 View
							if (cell.isNode()) {

								// return cell
							}
						},
						createCellView(cell) {
							// 在小地图中不渲染边
							if (cell.isEdge()) {
								return null
							}
						},
					}
				}
			});
			mainFn = x6MainFn(graph);
			// layoutMain(); //布局函数
			clickAction(); //绑定事件

			getData({
				id: 'root',
				root: true
			})

			watchAction(); //监听数据

			// 按钮样式鼠标移入移出样式
			$("#maximize svg").hover(function() {
				$(this).find("path").attr("fill", "#2F80ED");
			}, function() {
				$(this).find("path").attr("fill", "#707070");
			})

			
			
			// 按钮提示信息
			try {
				//
				let instances1 = tippy(".iconBtn", {
					appendTo: () => document.body,
					placement: "bottom-start",
					arrow: true,
					animation: "scale",
					allowHTML: true,
					// offset: [0, -1],
					// theme: "light",
					// trigger: "click",
					content(reference) {
						const id = reference.getAttribute('data-template');
						const template = document.getElementById(id);
						return template.innerHTML;
					},
					onShow(instance) {
						$("#tippy-" + instance.id + " .switch-component").click(function() {
							$("#tippy-" + instance.id + " .switch-component").unbind();
						})
						setTimeout(() => {
							let obj = $("#tippy-" + instance.id + " .switch-component")
							//设置小地图开关
							$("#tippy-" + instance.id + " .switch-component").prop("checked", mindMapFlag);

							$("#tippy-" + instance.id + " .switch-component").click(function() {
								let val = $("#tippy-" + instance.id + " .switch-component").prop(
									"checked");
								if (val) {

									$.debounce(function() {
										$("#minimapContainer").show(500)
									}, 220)
									mindMapFlag = true;
								} else {
									$.debounce(function() {
										$("#minimapContainer").hide(500)
									}, 220)
									mindMapFlag = false;
								}
								mindConfigObj.mindMapFlag = mindMapFlag;
								localStorage.setItem("mindConfig", JSON.stringify(mindConfigObj))
							})
						}, 200)

					},
					onHide(instance) {

					},
					interactive: true, //交互
				});
			} catch (e) {
				console.log("function ", arguments, " error", e)
			}
		}

		function getData({
			id = "",
			root = false,
			type = "0",
			dir = "down"
		}) {
			if (id == 'root' && root) {
				// alert("返回根节点数据")
				mainFn.resetCells(); //清空数据
				console.log("返回根节点数据")
				let resultBlock = getMockData({
					root: true
				}); //当前数据对象
				let resultBlockSrc = getMockData(); //上游数据对象
				let resultBlockDst = getMockData(); //下游数据对象

				rootObj = resultBlock[0]
				rootId = resultBlock[0].uuid

				//初始化根节点
				nodeData = {
					nodes: [],
					edges: []
				}; //数据清零
				downNodeList = [];
				upNodeList = [];
				let type = typeList[rootObj.objType];
				let rootNode = createNode({
					id: rootObj.nodeUuid,
					dir: "",
					type,
					root,
					text: rootObj.objName,
					data: rootObj
				})
				downNodeList.push(JSON.parse(JSON.stringify(rootNode)))
				nodeData.nodes.push(rootNode);
				// layoutMain(); //布局函数
				//循环创建上下游节点
				// let node = mainFn.getById(rootObj.nodeUuid);
				//创建下游节点
				if (resultBlockDst && resultBlockDst.length > 0) {
					nodeDownFlag = true;
					resultBlockDst.map(item => {
						let typeStr = typeList[item.objType];
						add(rootNode, "down", {
							id: item.nodeUuid,
							dir: "down",
							type: typeStr,
							text: item.objName,
							data: item
						})
					})
				}

				if (resultBlockSrc && resultBlockSrc.length > 0) {
					nodeUpFlag = true;
					upNodeList.push(JSON.parse(JSON.stringify(rootNode)))
					resultBlockSrc.map(item => {
						let typeStr = typeList[item.objType];
						add(rootNode, "up", {
							id: item.nodeUuid,
							dir: "up",
							type: typeStr,
							text: item.objName,
							data: item
						})
					})

				}
				setTimeout(() => {
					graph.centerContent()
				}, 200)
			} else {
				//处理子节点
				let resultBlockSrc = []; //上游数据对象
				let resultBlockDst = []; //下游数据对象

				if (dir == "down") {
					resultBlockDst = getMockData(); //下游数据对象
					resultBlockDst.map(item => {
						let typeStr = typeList[item.objType];
						add(window.selectNode, "down", {
							id: item.nodeUuid,
							dir: "down",
							type: typeStr,
							text: item.objName,
							data: item
						})
					})
				}
				if (dir == "up") {
					resultBlockSrc = getMockData(); //上游数据对象
					resultBlockSrc.map(item => {
						let typeStr = typeList[item.objType];
						add(window.selectNode, "up", {
							id: item.nodeUuid,
							dir: "up",
							type: typeStr,
							text: item.objName,
							data: item
						})
					})
				}
				if (resultBlockDst.length == 0 && resultBlockSrc.length == 0) {
					console.log("resultBlockDst.length:",resultBlockDst.length)
					console.log("resultBlockSrc.length:",resultBlockSrc.length)
					add(window.selectNode, dir)
				}
			}
			layoutMain()
		}
		//布局函数
		function layoutMain() {
			graph.freeze();
			let hideNodeList = mainFn.nodeIsShowFn(); //获取要隐藏的节点

			if (downNodeList && downNodeList[0]) {
				console.log("---downNodeList----", downNodeList)
				const result = Hierarchy.mindmap(downNodeList[0], {
					direction: 'LR',
					getHeight() { //节点高度
						return nodeConfig.nodeHeight
					},
					getWidth() { //节点宽度
						return nodeConfig.nodeWidth
					},
					getHGap() { //左右间距
						return X6Config.ranksep

					},
					getVGap() { //上下间距
						return X6Config.nodesep
					},
					getSide: () => {
						return 'right'
					},
				})
				console.log("result", result)
				const traverse = (data) => {
					if (data) {
						node = nodeData.nodes.find(item => {
							return item.id == data.id
						})
						if (node) {
							node.x = data.x;
							node.y = data.y;
						}
					}
					if (data.children) {
						data.children.forEach(item => {
							traverse(item)
						})
					}
				}
				traverse(result)
			}

			if (upNodeList && upNodeList[0]) {
				console.log("---upNodeList----", upNodeList)
				const result = Hierarchy.mindmap(upNodeList[0], {
					direction: 'RL',
					getHeight() {
						return nodeConfig.nodeHeight
					},
					getWidth() {
						return nodeConfig.nodeWidth
					},
					getHGap() {
						return X6Config.ranksep
					},
					getVGap() {
						return X6Config.nodesep
					},
					getSide: () => {
						return 'left'
					},
				})
				console.log("result", result)
				const traverse = (data) => {
					if (data) {
						node = nodeData.nodes.find(item => {
							return item.id == data.id
						})
						if (node) {
							node.x = data.x;
							node.y = data.y;
						}
					}
					if (data.children) {
						data.children.forEach(item => {
							traverse(item)
						})
					}
				}
				traverse(result)
			}
			graph.fromJSON(nodeData);
			//隐藏对应节点
			for (const key in hideNodeList) {
				if (hideNodeList.hasOwnProperty.call(hideNodeList, key)) {
					const element = hideNodeList[key];
					element.map((item) => {
						let node = mainFn.getById(item);
						node.data.showFlag = false;
						node.setVisible(false, {
							silent: false
						})
					});
				}

			}
			graph.unfreeze();

			if (selectedMod) {
				oneSelectNode()
			}
		}

		//添加节点步骤
		function add(node, dir, data) {
			//接口数据获取   这里使用随机数1就添加节点，0就结束步骤
			if (data) {

				addNode(node, dir, data);
			} else {
				// 没有查询到数据即为叶子节点
				let dataObj = {
					leafNode: true
				};
				if (dir == "up") {
					dataObj = {
						leafNodeUP: true
					};
				}

				let leafNode = findNodeFn({
					id: node.id,
					data: dataObj
				}); //设置为叶子节点
				selectNode = leafNode;
				// addEndNode(node, dir);
				alert("当前为叶子节点")
			}
		}
		//创建节点数据结构
		function createNode({
			id = new Date().getTime(),
			root = false,
			dir = "down",
			type = "tab",
			text = "test text",
			time = new Date().toString(),
			tools = true,
			data = {}
		}) {
			let title = nodeTypeClass[type];
			return {
				id: id,
				width: nodeConfig.nodeWidth,
				height: nodeConfig.nodeHeight,
				shape: "html",
				data: {
					id: id,
					time,
					type,
					dir,
					showFlag: true,
					rootId: rootId,
					root: root,
					title: title,
					text: text,
					tools,
					...data
				},

				html: {
					render(node) {
						const data = node.getData();
						// return actionMod(data);
						return reactLMod(data);
					},
					shouldComponentUpdate(node) {
						// 控制节点重新渲染
						return node.hasChanged("data");
					},
				},
				ports: {
					groups: {
						left: {
							position: 'left',
							attrs: {
								circle: {
									magnet: false,
									stroke: 'red',
									strokeWidth: 0,
									fill: 'red',
									stroke: 'red',
									r: 0,

								},
							},
						},
						right: {
							position: 'right',
							attrs: {
								circle: {
									magnet: false,
									stroke: 'red',
									strokeWidth: 0,
									fill: 'red',
									stroke: 'red',
									r: 0,

								},
							},
						}

					},
					items: [{
						id: 'port',
						group: 'left',
					}, {
						id: 'port2',
						group: 'right',
					}, ]
				}
			};
		}

		//添加节点
		function addNode(node, dir, data) {
			let nodeObj = createNode(data)
			nodeObj.parentId = node.id
			if (node && dir == "down") {
				//downNodeList  找到匹配子节点的id
				// downNodeList.push(nodeObj)
				addChildrenListFn(downNodeList[0], node.id, nodeObj)
			} else if (node && dir == "up") {
				// upNodeList.push(nodeObj)
				addChildrenListFn(upNodeList[0], node.id, nodeObj)
			}
			nodeData.nodes.push(nodeObj);
			nodeData.edges.push({
				// source: dir == "down" ? node.id : nodeObj.id,
				// target: dir == "down" ? nodeObj.id : node.id,
				source: dir == "down" ? {
					cell: node.id,
					port: "port2",
				} : {
					cell: nodeObj.id,
					port: "port2",
				},
				target: dir == "down" ? {
					cell: nodeObj.id,
					port: "port",
				} : {
					cell: node.id,
					port: "port",
				},
				shape: "custom-edge-label", // labels: ["步骤过程"],
				zIndex: -1,
				attrs: {
					line: {
						stroke: "#A2B1C3",
						strokeWidth: 2,
						// targetMarker: null, //箭头
					},

				},
				data: {
					dir
				}
			});

		}
		//绑定事件
		function clickAction() {
			graph.on("node:mousedown", ({
				e,
				x,
				y,
				node,
				view
			}) => {
				//点击节点
				console.log("node", node)
				if (selectedMod) {
					setTimeout(() => {
						let obj = $("#modBody" + node.id).parent(".reactLBody");
						obj.addClass("selectedMod2")
					}, 100)
				}
				selectNode = node;
				selectEdge = {}
				let str = nodeInfoModFn(node.data.objType); //

				if (selectNode && selectNode.data && selectNode.data.info && selectNode.data.info.objIsExist ==
					"false") {
					alert("该对象已不存在", "warning")
					$(".tippy-box").hide();
					setTimeout(() => {
						$(".tippy-box").hide()
					}, 10)
					return
				}

				let instances1 = tippy("#modBody" + node.id, {
					appendTo: () => document.body,
					placement: "top-start",
					arrow: true,
					animation: "scale",
					// theme: "light",
					trigger: "click",
					content: str,
					allowHTML: true,
					interactive: true, //交互
					// appendTo: "parent",
					onShow(instance) {
						setTimeout(() => {
							showNodeInfo()
						}, 20)

					}
				});
				for (let i = 0; i < tippyList.length; i++) {
					let element = tippyList[i];
					try {
						element.destroy ? element.destroy() : "";
					} catch (e) {
						console.log("error", e)
					}
				}
				tippyList.length = 0;
				tippyList.push(instances1[0]);
				// instances1[0].show();
				showNodeDetail(node)

			});
			graph.on("edge:mousedown", ({
				e,
				x,
				y,
				edge,
				view
			}) => { //边的点击
				selectEdge = edge;
				selectNode = {}
				// edgeClickAction({e, x, y, edge, view})
			});
			graph.on("blank:click", ({
				e,
				x,
				y
			}) => {
				//点击空白
				hoverNode = null;
			});
			graph.on("node:mouseenter", ({
				e,
				x,
				y,
				node
			}) => { //节点移入
				let data = node.getData();
				let id = node.id;
				hoverNode = node;
				$(".x6-graph-scroller").focus();
				// selectNode = node;
				if (data.root) {
					//根节点处理
					getRootTools(node);
				} else if (data.dir == "down" && data.tools) {
					//下游节点处理
					getDownTools(node);
				} else if (data.dir == "up" && data.tools) {
					//上游节点处理
					getUpTools(node);
				}
			});
			graph.on("node:mouseleave", ({
				e,
				x,
				y,
				node
			}) => { //节点移出
				//移出
				hoverNode = null;
				node.removeTools();
			});
			graph.on("edge:mouseenter", ({
				e,
				x,
				y,
				edge
			}) => { //边移入

				let riskCount = edge.data && edge.data.riskCount ? edge.data.riskCount : 0
				if (riskCount) {
					// edge.appendLabel({ attrs: { label: { text: "风险数量："+riskCount } },})
					edge.setLabels([{
						attrs: {
							label: {
								text: "风险数量：" + riskCount
							}
						}
					}])
					edge.setZIndex(888);
				}

			});
			graph.on("edge:mouseleave", ({
				e,
				x,
				y,
				edge
			}) => { //边移出
				//移出
				// edge.removeLabelAt(0)
				edge.labels = {}
				let riskCount = edge.data && edge.data.riskCount ? edge.data.riskCount : 0

				if (riskCount) {
					edge.setZIndex(-1);
				}

			});
		}


		//根节点工具
		function getRootTools(node) {

			if (nodeDownFlag) {
				getDownTools(node);
			}
			if (nodeUpFlag) {
				getUpTools(node);
			}

		}

		//下游节点工具处理
		function getDownTools(node) {
			//开始隐藏节点
			let childrenFlag = mainFn.getEdges().find((item) => {
				return item.source.cell == node.id;
			});
			if (!childrenFlag && !node.data.leafNode) {
				//没有子节点
				//node.addTools(addBtnChildrenTool(this.add));
				node.addTools(addBtnChildrenTool(addNodeChildren));
			} else {
				if (!node.data.leafNode && childrenFlag) { //非叶子节点才有工具
					//有子节点 使用显示或隐藏
					let child = mainFn.getById(childrenFlag.target.cell);
					let item = child[0] ? child[0] : child;
					if (item.visible) {
						//添加隐藏工具
						node.addTools(decreaseBtnChildrenTool(hideCell));
					} else {
						//添加显示工具
						node.addTools(addBtnChildrenTool(showCell));
					}
				}
			}
		}

		//上游节点工具处理
		function getUpTools(node) {
			let parentFlag = mainFn.getEdges().find((item) => {
				return item.target.cell == node.id;
			});

			if (!parentFlag && !node.data.leafNodeUP) {
				node.addTools(addBtnParentTool(addNodeParent));
			} else {
				if (!node.data.leafNodeUp && parentFlag) { //非叶子节点才有工具
					//有子节点 使用显示或隐藏
					let parent = mainFn.getById(parentFlag.source.cell);
					let item = parent[0] ? parent[0] : parent;

					if (item.visible) {
						//添加隐藏工具
						node.addTools(decreaseBtnParentTool(hideCell));
					} else {
						//添加显示工具
						node.addTools(addBtnParentTool(showCell));
					}
				}

			}
		}

		/**
		 * 根据id查询返回node，没有id就返回全部nodes
		 * @param id    节点id
		 * @param dataObj   需要变革的节点data信息
		 */
		function findNodeFn({
			id = null,
			data = ""
		}) {
			try {
				let node = {}
				if (id) {
					node = mainFn.getById(id);
					if (node && node.data && data) {
						node.data = {
							...node.data,
							...data
						};
						nodeData.nodes.map(item => {
							if (item.id == node.id) {
								item.data = node.data;
							}
						})
					}
				} else {
					node = mainFn.getNodes();
					if (node && node.length > 0 && data) {
						node.map(item => {
							item.data = {
								...item.data,
								...data
							};
							nodeData.nodes.map(it => {
								if (it.id == item.id) {
									it.data = item.data;
								}
							})
						})
					}
				}
				return node;
			} catch (e) {
				console.log("function ", arguments, " error", e)
			}
		}
		//显示节点详情
		function showNodeDetail(node) {
			try {
				let nodeInfo = node.data.info;
				if (!nodeInfo) {
					queryDetailFn();
				} else {
					showNodeInfo();
				}
			} catch (e) {
				console.log("error", e)
			}
		}
		//请求  详情信息
		function queryDetailFn() {
			console.log("请求  详情信息")
		}
		// 根据详情显示内容
		function showNodeInfo() {
			try {
				$("body").removeClass("ei-tippyStyle")
				$("#tableEname").html("")
				$("#tableCname").html("")
				$("#dbEngineName").html("")
				$("#itemSchema").html("")
				$("#projectName").html("")
				$("#apiName").html("")
				$("#modelId").html("")
				$("#apiStatus").html("")
				$("#apiDesc").html("")
				$("#itemType").html("")
				$("#fieldEname").html("")
				$("#fieldCname").html("")
				$("#fieldType").html("")
				$("#fieldLen").html("")
				$("#pageEname").html("")
				$("#pageEname2").html("")
				$("#pageCname").html("")
				$("#desc").html("")
				$("#isAuth").html("")
				$("#isPublic").html("")
				$("#isOn").html("")

				if (selectNode && selectNode.data) {
					$("#tableEname").html(Mock.mock('@word(3, 15)'));
					$("#tableCname").html(Mock.mock('@csentence(3, 15)'));
					$("#dbEngineName").html(Mock.mock('@title'));
					$("#itemSchema").html(Mock.mock('@title'));
					$("#projectName").html(Mock.mock('@csentence(3, 15)'));
					$("#apiName").html(Mock.mock('@csentence(3, 15)'));
					$("#modelId").html(Mock.mock('@id'));
					$("#apiStatus").html(Mock.mock('@cword("开关")'));
					$("#apiDesc").html(Mock.mock('@ctitle()'));
					$("#fieldEname").html(Mock.mock('@title(5)'));
					$("#fieldCname").html(Mock.mock('@ctitle()'));
					$("#fieldType").html(Mock.mock('@title(5)'));
					$("#fieldLen").html(Mock.mock('@title(5)'));
					$("#itemType").html(Mock.mock('@title(5)'));

					$("#fieldLen").html(Mock.mock('@title(5)'))
					$("#pageEname").html(Mock.mock('@title(5)'))
					$("#pageEname2").html(Mock.mock('@title(5)'))
					$("#pageCname").html(Mock.mock('@ctitle()'))
					$("#desc").html(Mock.mock('@ctitle()'))
					$("#isAuth").html(Mock.mock('@cword("是否")'))
					$("#isPublic").html(Mock.mock('@cword("是否")'))
					$("#isOn").html(Mock.mock('@cword("开关")'))

					$(".svgbox").hide();
				} else {
					$("#itemType").html(selectNode.data.title);

					if (obj && obj.time) {
						setTimeout(() => {
							$(".svgbox").hide();
						}, obj.time)
					}
				}
			} catch (e) {
				console.log("function ", arguments, " error", e)
			}
		}


		//显示相关节点和边
		function showCell(node, dir) {
			let id = node.id;
			window.selectNode = node
			let edges = mainFn.getEdges();
			for (let i = 0; i < edges.length; i++) {
				let item = edges[i];
				if (dir == "down") {
					//处理子节点
					if (item.source.cell == id) {
						let target = item.target.cell;
						let targetNode = mainFn.getById(target);
						targetNode.data.showFlag = true;
						targetNode.setVisible(true)
					}

				} else if (dir == "up") {
					//处理父节点
					if (item.target.cell == id) {
						let source = item.source.cell;
						let sourceNode = mainFn.getById(source);
						sourceNode.data.showFlag = true;
						sourceNode.setVisible(true, {
							silent: false
						})
					}
				}
			}
			node.removeTools();
			// layoutMain();
		}
		//隐藏相关节点和边
		function hideCell(node, dir) {
			let id = node.id;
			findNode(id);
			window.selectNode = node

			function findNode(id) {
				let edges = mainFn.getEdges();

				edges.map((item) => {
					if (dir == "down") {
						//处理子节点
						let source = item.source.cell;
						if (source == id) {
							let target = item.target.cell;
							let targetNode = mainFn.getById(target);
							targetNode.data.showFlag = false;
							targetNode.setVisible(false)
							findNode(targetNode.id);
						}
					} else if (dir == "up") {
						//处理父节点
						let target = item.target.cell;
						if (target == id) {
							let source = item.source.cell;
							let sourceNode = mainFn.getById(source);
							sourceNode.data.showFlag = false;
							sourceNode.setVisible(false)
							findNode(sourceNode.id);
						}
					}
				});
			}

			node.removeTools();
			// layoutMain();
		}
		// 添加子节点
		function addNodeChildren(node, dir) {

			selectNode = node;

			console.log("node", node)
			getData({
				id: node.data.uuid,
				type: node.data.objType,
				dir
			})
		}

		// 添加父节点
		function addNodeParent(node, dir) {
			selectNode = node;
			console.log("node", node)
			getData({
				id: node.data.uuid,
				type: node.data.objType,
				dir
			})
		}
		// 给list  添加指定子节点node
		function addChildrenListFn(list, id, node) {

			function forFn(listItem, id) {
				if (listItem && listItem.id == id) {

					if (listItem.children) {
						listItem.children.push(node)
					} else {
						listItem.children = [node]
					}
				}

				if (listItem && listItem.children) {
					listItem.children.map(item => {
						forFn(item, id)
					})
				}
			}
			forFn(list, id)
		}

		/**
		 * 放大
		 */
		function zoomIn() {
			try {
				console.log(",graph.zoom()", graph.zoom())
				graph.zoomTo(graph.zoom() + 0.2)

			} catch (e) {
				console.log("function ", arguments, " error", e)

			}
		}
		/**
		 * 缩小
		 */
		function zoomOut() {
			try {
				console.log(",graph.zoom()", graph.zoom())
				graph.zoomTo(graph.zoom() - 0.2)
			} catch (e) {
				console.log("function ", arguments, " error", e)
			}
		}
		/**
		 * 视图居中
		 */
		function nodeCenter() {
			try {
				// graph.centerContent()
				// graph.scrollToContent()
				let rootNode = mainFn.getById(rootObj.nodeUuid);
				if (selectedMod) {
					setTimeout(() => {
						let obj = $("#modBody" + rootNode.id).parent(".reactLBody");
						obj.addClass("selectedMod2")
					}, 100)
				}
				selectNode = rootNode;
				selectEdge = {}
				graph.scrollToCell(rootNode)
			} catch (e) {
				console.log("function ", arguments, " error", e)
			}
		}
		/**
		 * 启用多选模式
		 */
		function multipleModFn() {
			selectedMod = false;
			multipleMod = true;
			$(".reactLBody").removeClass("selectNodeBody")
		}
		/**
		 * 启动选中模式
		 */
		function selectedModFn() {
			// graph.cleanSelection()
			// graph.toggleSelection()
			selectedMod = !selectedMod;
			multipleMod = false;
			$(".reactLBody").removeClass("selectNodeBody")
		}
		/**
		 * 单个选中模式
		 */
		function oneSelectNode() {
			if (selectNode && selectedMod) {
				$(".reactLBody").removeClass("selectNodeBody")
				let id = "modBody" + selectNode.id
				let reactLBody = $("#" + id).parent()
				reactLBody.addClass("selectNodeBody")
			}
		}
		/**
		 * 多个个选中模式
		 */
		function multipleSelectNode() {
			if (selectNode && multipleMod) {
				$(".reactLBody").removeClass("selectNodeBody")
				alert("功能还在开发中")
			}
		}

		function selectWorkspace(){
			val = $("#workspaceMode").val();
			if("1"==val){//源端视角
				$("#legendDiv").hide()
				$("#legendDiv").show();
			}else if("2"==val){//工作空间视角
				$("#legendDiv").show();

			}

			let mindConfig = localStorage.mindConfig;
			if(mindConfig){
				mindConfig = JSON.parse(mindConfig)
				mindConfig.workspaceMode = val;
				localStorage.setItem("mindConfig",JSON.stringify(mindConfig))
			}
			
			
					
		}
		/**
		 * 添加  工作空间图例
		 */
		function projectNamePublicListAdd(str){
			if(projectNamePublicList.indexOf(str)==-1){
				projectNamePublicList.push(str);
				let color = Mock.mock('@color')
				let divStr = `<div class="legendTextDiv" data-title="${str}">
					<span class="legendColorSpan"><span class="legendColor" style="background-color: ${color};"></span></span>
					<span class="legendText" title="${str}">${str}</span>
				</div>`
				$("#legendDiv").append(divStr)
				
			}
			
		}

		function queryNodeUpAndDown(){
			console.log("projectNamePublicList  queryNodeUpAndDown" ,selectNode)
			let dir = (selectNode.data&&selectNode.data.dir)?selectNode.data.dir:""
			if(dir){
				if(dir=="up"){
					dir="down"
				}else if(dir=="down"){
					dir="up"
				}
				debugger
				getData({
			
			root : false,
			type : "0",
			dir
		})
			}

		}

		// 返回  模拟数据
		function getMockData(obj) {
			let arr = []
			let projectNameList = ['工作空间1','工作空间2','工作空间3','工作空间4','工作空间长名测试长名测试长名测试长名测试长名测试长名测试长名测试长名测试长名测试长名测试']
			if (obj && obj.root) { //根节点
				let integer = Mock.mock('@integer(0, 3)')
				projectNamePublicListAdd(projectNameList[integer])
				
				arr = [{
					"objType": Mock.mock('@integer(0, 6)'), // 类型  数字
					"objType": Mock.mock('@integer(0, 1)'), // 类型  数字
					"objName": Mock.mock('@ctitle(6, 15)'), //节点名称
					"firstLevelEname": Mock.mock('@ctitle(4, 9)'), //层级名称
					"uuid": Mock.mock('@id'), //  节点uuid
					"nodeUuid": Mock.mock('@id'), // 节点标识id 随机唯一
					projectName:projectNameList[integer]
				}]
			} else {
				let num = Mock.mock('@natural(0, 5)')
				for (let i = 0; i < num; i++) {
					let integer = Mock.mock('@integer(0, 4)')
					projectNamePublicListAdd(projectNameList[integer])
					let temoObj = {
						"objType": Mock.mock('@integer(0, 6)'), // 类型  数字
						"objType": Mock.mock('@integer(0, 1)'), // 类型  数字
						"objName": Mock.mock('@ctitle(6, 15)'), //节点名称
						"firstLevelEname": Mock.mock('@ctitle(4, 9)'), //层级名称
						"uuid": Mock.mock('@id'), //  节点uuid
						"nodeUuid": Mock.mock('@id'), // 节点标识id 随机唯一
						projectName:projectNameList[integer]
					}
					arr.push(temoObj)
				}
			}


			return arr
		}
	</script>

</html>
